<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 页面标题 -->
    <view class="bg-white px-[32rpx] py-[24rpx] border-b border-gray-100">
      <view class="flex items-center">
        <!-- <view class="w-[40rpx] h-[40rpx] bg-[#41916c] rounded-full flex items-center justify-center mr-[16rpx]">
          <IconFont name="dongdong" size="20" color="#ffffff"></IconFont>
        </view> -->
        <text class="text-[36rpx] font-bold text-[#333333]">收费说明</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="bg-white p-[32rpx] mb-[20rpx]">
      <view class="text-[28rpx] text-gray-700 leading-[1.8]">
        <view class="mb-[32rpx]">
          <text class="text-[32rpx] font-bold text-[#333333] block mb-[16rpx]">一、收费标准</text>
          <text class="text-[28rpx] text-gray-700 leading-[1.8] block">
            我们的收费标准严格按照国家相关规定执行，确保收费透明、合理。
          </text>
        </view>

        <view class="mb-[32rpx]">
          <text class="text-[32rpx] font-bold text-[#333333] block mb-[16rpx]">二、服务项目收费</text>
          <text class="text-[28rpx] text-gray-700 leading-[1.8] block">
            1. 生活护理：50-100元/小时<br/>
            2. 医疗护理：80-150元/小时<br/>
            3. 康复护理：100-200元/小时<br/>
            4. 特殊护理：150-300元/小时<br/>
            5. 24小时陪护：300-500元/天
          </text>
        </view>

        <view class="mb-[32rpx]">
          <text class="text-[32rpx] font-bold text-[#333333] block mb-[16rpx]">三、收费方式</text>
          <text class="text-[28rpx] text-gray-700 leading-[1.8] block">
            1. 在线支付：支持微信、支付宝等支付方式。<br/>
            2. 预付费：可预先充值，享受优惠折扣。<br/>
            3. 后付费：服务完成后按实际费用结算。<br/>
            4. 分期付款：大额订单可申请分期付款。
          </text>
        </view>

        <view class="mb-[32rpx]">
          <text class="text-[32rpx] font-bold text-[#333333] block mb-[16rpx]">四、优惠政策</text>
          <text class="text-[28rpx] text-gray-700 leading-[1.8] block">
            1. 新用户首单享受8折优惠。<br/>
            2. 长期服务享受9折优惠。<br/>
            3. 推荐好友享受返现奖励。<br/>
            4. 节假日期间有特别优惠活动。
          </text>
        </view>

        <view class="mb-[32rpx]">
          <text class="text-[32rpx] font-bold text-[#333333] block mb-[16rpx]">五、退费政策</text>
          <text class="text-[28rpx] text-gray-700 leading-[1.8] block">
            1. 服务开始前可全额退款。<br/>
            2. 服务开始后按实际服务时间计算。<br/>
            3. 因服务质量问题可申请退款。<br/>
            4. 退款将在3-7个工作日内到账。
          </text>
        </view>

        <view class="mb-[32rpx]">
          <text class="text-[32rpx] font-bold text-[#333333] block mb-[16rpx]">六、发票开具</text>
          <text class="text-[28rpx] text-gray-700 leading-[1.8] block">
            1. 可开具正规发票。<br/>
            2. 支持电子发票和纸质发票。<br/>
            3. 发票内容为"护理服务费"。<br/>
            4. 发票将在支付成功后自动开具。
          </text>
        </view>

        <view class="mb-[32rpx]">
          <text class="text-[32rpx] font-bold text-[#333333] block mb-[16rpx]">七、咨询联系</text>
          <text class="text-[28rpx] text-gray-700 leading-[1.8] block">
            客服热线：400-123-4567<br/>
            财务咨询：400-123-4568<br/>
            服务时间：24小时在线<br/>
            投诉建议：400-123-4569
          </text>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 p-[24rpx] safe-area-bottom">
      <nut-button 
        type="primary" 
        size="large" 
        class="w-full bg-[#41916c] border-0"
        @tap="goBack"
      >
        我已了解
      </nut-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { IconFont } from '@nutui/icons-vue-taro';
import Taro from '@tarojs/taro';

definePageConfig({
  navigationBarTitleText: '收费说明',
  navigationBarBackgroundColor: '#ffffff',
  navigationBarTextStyle: 'black'
});

const goBack = () => {
  Taro.navigateBack();
};
</script>

<style>
.safe-area-bottom {
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
}
</style> 